<page-header *ngIf="!topic" [title]="'话题详情'"></page-header>
<page-header *ngIf="!!topic" [title]="topic.title"></page-header>


<div *ngIf="!!topic" >
  <nz-card [nzBordered]="false">
    <ul class="meta-item-list">
      <li>作者：{{ topic.author.displayName }}（用户id: {{ topic.author.id }}）</li>
      <li>创建于：{{ topic.createdAt }}</li>
      <li>浏览数：{{ topic.viewCount }}</li>
      <li>回复数：{{ topic.replyCount }}</li>
    </ul>
  </nz-card>

  <nz-card [nzBordered]="false" class="topic-content">
    <div [innerHTML]="topic.htmlContent"></div>
  </nz-card>

  <nz-card [nzBordered]="false" class="topic-reply-list">
    <h2>回复列表</h2>
    <nz-list *ngIf="!!replies" [nzDataSource]="replies" [nzRenderItem]="topicItemTemplate">
      <ng-template #topicItemTemplate let-reply>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
              <div nz-col nzSpan="4">
                <p>作者：{{reply.author.displayName}}</p>
                <p>创建于：{{reply.createdAt}}</p>
              </div>
              <div nz-col nzSpan="16">
                <div class="reply-content">
                  <div [innerHTML]="reply.htmlContent"></div>
                </div>
              </div>
              <div nz-col nzSpan="2">
                <a (click)="deleteReply(reply.id)">删除</a>
              </div>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
    <div *ngIf="!!replies && !replies.length" class="no-replies">
      没有回复
    </div>
  </nz-card>

  <div class="topic-operations">
    <button nz-button nzType="danger" (click)="deleteTopic(topic.id, topic.title)">删除话题</button>
  </div>
</div>

<div *ngIf="!topic">
  加载中...
</div>
